import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Popconfirm, Divider, Button, Input, Modal, Row, Col, Space,Tag } from 'antd';
import { FormOutlined, PlusOutlined, PlusSquareOutlined, DeleteOutlined, SyncOutlined } from '@ant-design/icons';
import { Link, connect } from 'umi';
import moment from 'moment';
import ContentEdit from './contentEdit';
import Categories from './categories';

const { Search } = Input;
class ViewContent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            visible: false,
            selectedRowKeys: [],
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
        }
    }
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        this.setState({ loading: true });
        const { pageIndex, pageSize } = this.state;
        this.props.dispatch({
            type: "Article/getListsAsync",
            payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize },
        }).then(() => {
            var resp = this.props.Article.response;
            if (resp) {
                var dataSource = resp.result.items;
                this.setState({ loading: false, dataSource, totalCount: resp.result.totalCount });
            }
        });
    }
    handleDelete = (id) => {
        this.props.dispatch({
            type: "CrudModel/delete",
            payload: { id },
            control: "Article"
        });
    }
    handleEdit = (record) => {
        this.props.dispatch({
            type: "Article/setCurrent",
            payload: record,
        });
        this.switchModal(true);
    }
    handleAdd = () => {
        this.props.dispatch({
            type: "Article/setCurrent",
            payload: {},
        });
        this.switchModal(true);
    }
    onSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    };
    onSearch = (value) => {
        var payload = this.state.payload;
        payload.keywords = value;
        console.log(payload)
        this.setState({ payload }, () => {
            this.fetchDatas();
        });

    }
    switchModal = (visible) => {
        this.setState({ visible });
    };
    render() {
        const { loading, dataSource, selectedRowKeys, pageIndex, totalCount, pageSize } = this.state;
        const columns = [
            {
                title: '标题',
                dataIndex: 'title',
            },
            {
                title: '分类',
                dataIndex: 'categoryName',
                render: (text) => (
                    <Tag color="lime">{text}</Tag>
                )
            },
            {
                title: '发布时间',
                dataIndex: 'creationTime',
                render: (text) => (
                    <span>{moment(text).format('YYYY-MM-DD HH:MM:SS')}</span>
                )
            },
            {
                title: '操作',
                render: (record) =>
                    dataSource.length >= 1 ? (
                        <span>
                            <Popconfirm title="确定删除?" onConfirm={() => this.handleDelete(record.id)}>
                                <a>删除</a>
                            </Popconfirm>
                            <Divider type="vertical" />
                            <Link to={'./contEdit?id=' + record.id}>编辑</Link>
                            {/* <a onClick={() => this.handleEdit(record)}>编辑</a> */}
                        </span>
                    ) : null,
            },
        ];
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <PageHeaderWrapper title={false}>
                <Row gutter={16}>
                    <Col span={6}>
                        <Categories layout="article" />
                    </Col>
                    <Col span={18}>
                        <Card>
                            <Space>
                                <Button type="primary"
                                    onClick={this.fetchDatas}
                                    loading={loading}
                                    icon={<SyncOutlined />} >刷新</Button>
                                <Button type="primary" onClick={this.handleAdd} icon={<PlusOutlined />} >快速添加</Button>
                                <Search style={{ width: 240 }} placeholder="输入关键词搜索" onSearch={value => this.onSearch(value)} />
                                <span>
                                    {hasSelected ? `选择了 ${selectedRowKeys.length} 项` : ''}
                                </span>
                            </Space>
                            <Table
                                rowKey="id"
                                loading={loading}
                                rowSelection={rowSelection}
                                columns={columns}
                                dataSource={dataSource}
                                pagination={{
                                    onChange: page => {
                                        console.log(page);
                                        this.setState({ pageIndex: page }, function () {
                                            this.fetchDatas();
                                        });
                                    },
                                    pageSize,
                                    total: totalCount,
                                }} />
                        </Card>
                    </Col>
                </Row>

                <Modal
                    title={<b>快速添加</b>}
                    visible={this.state.visible}
                    onOk={() => this.switchModal(false)}
                    onCancel={() => this.switchModal(false)}
                    footer={null}
                    destroyOnClose={true}>
                    <ContentEdit
                        switchModal={(para) => this.switchModal(para)}
                        fetchDatas={() => this.fetchDatas()} />
                </Modal>
            </PageHeaderWrapper>
        )
    }
}

export default connect(({ user, CrudModel, Article }) => ({
    currentUser: user.currentUser,
    response: CrudModel.response,
    Article,
}))(ViewContent);